<template>
    <!-- 创建用户dialog -->
    <Dialog
        :layer="layer"
        v-model:visible="layer.show"
        @confirm="submit"
        @close="close"
    >
        <div class="form-content">
            <el-form label-width="120px" :rules="editFormRules" :model="formParams" ref="formRef">
                <el-form-item label="用户ID" v-if="isEdit == 'edit'">
                    <span>{{formParams.sysUserId}}</span>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input @change="getName" :disabled="isEdit == 'edit'" maxlength="11" type="text" v-model="formParams.phone"  placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input maxlength="200" v-model="formParams.name" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="职位类型" prop="positionType">
                    <el-select v-model="formParams.positionType" placeholder="请选择职位类型">
                        <el-option v-for="(item) in posList" 
                            :key="item.code"
                            :value="item.code"
                            :label="item.name" 
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="学段学科" prop="stageSubjectGradeList">
                    <stage-subject-grade
                        :isShowGrade="route.query.institutionType == 1"
                        v-model:selectedData="formParams.stageSubjectGradeList"
                        :placeholder="placeholder"
                        height="200"
                    ></stage-subject-grade>
                </el-form-item>
                <el-form-item label="所在单位" v-if="isEdit == 'edit'">
                    <span>{{formParams.school}}</span>
                </el-form-item>
            
            </el-form>
        </div>
    </Dialog>

</template>

<script>
import { defineComponent, toRefs, ref, reactive, toRef, computed, onMounted, watch, nextTick } from 'vue'
import Dialog from '@/components/dialogComp.vue'
import stageSubjectGrade from '@/components/stage-subject/stage-subject-grade.vue'
import { useStore } from 'vuex'
import {useRoute} from 'vue-router'
export default defineComponent({
    // name:'',
    props: {
        // 职位类型列表
        posList: {
            type: Object,
            default: () => {}
        },
        isEdit: {
            type: String,
            default: 'add'
        },
        formData: {
            type: Object,
            default: () => {}
        }
    },
    components: {
        Dialog,
        stageSubjectGrade
    },
    setup(props, context){
        const formRef = ref(null)
        const areaRef = ref(null)
        const route = useRoute()
        const store = useStore()
        // 状态数据
        const state = reactive({
            stageTreeProps: {
                multiple: true,
                value: 'code',
                label: 'name',
                children: 'subjects',
                checkStrictly: false
            },
            formParams: props.formData,
            layer: { 
                show: false,
                title: props.isEdit == 'add' ? '新增用戶' : '編輯用戶',
                width: '500px'
            },
            editFormRules: { // 校验
                phone: [
                    {
                        validator: (rule, value, callback) => {
                            const reg = /^1[0-9]\d{9}$/g
                            if(value == ''){
                                callback(new Error('手机号不能为空'))
                            }else if(!reg.test(value)){
                                callback(new Error('手机号格式不正确'))
                            }else{
                                callback()
                            }
                        },
                        trigger: 'blur',
                        required: true 
                    }
                ],
                name: [{ required: true, message: '请输入名字', trigger: ['blur', 'change'] }],
                positionType: [{ required: true, message: '请选择职位类型', trigger: 'change' }],
                stageSubjectGradeList: [{ required: true, message: '请选择学科学段', trigger: 'change' }]
            }
        })

        // 方法
        const methods = {
            getName(val){
                store.dispatch('proxyAction', {
                    name: 'getNameByPhone',
                    queries: {
                        phone: val,
                        dtTenant: route.query.dtTenant
                    }
                }).then((res) => {
                    state.formParams.name = res.data
                }).catch(err => {
                    store.dispatch('message', {
                        message: err.message || '操作失败'
                    });
                })
            },
            async open(){
                methods.setModel(props.isEdit)
                state.layer.show = true
                await nextTick()
                formRef.value && formRef.value.clearValidate()
            },
            close(){
                methods.dialogClose()
                state.layer.show = false
            },
            // 新增修改显示弹窗
            setModel(type){
                const obj = {
                    title: type == 'add' ? '新增用户' : '编辑'
                }
                state.layer = {...state.layer, ...obj}
                if(type == 'edit'){
                    console.log(props.formData)
                    state.formParams = {
                        ...props.formData,
                        stageSubjectGradeList: props.formData.stageSubjectGrades
                    }
                }else{
                    state.formParams = {}
                }
            },
            // 弹窗关闭
            dialogClose(){
                formRef.value && formRef.value.clearValidate()
                for (const key in state.formParams) {
                    state.formParams[key] = undefined
                }
            },
            // 提交表单
            submit(){
                formRef.value.validate((valid, fields) => {
                    console.log(fields, '123')
                    if(valid){
                        state.formParams.stageSubjectGrades = undefined
                        context.emit('submit', state.formParams)
                    }
                })
                console.log(state.formParams)
            }
        }
        watch(() => props.isEdit, (n) => {
            methods.setModel(n)
        })
        watch(() => state.formParams.stageSubjectGradeList, async (val) => {
            if(val && val.length){
                await nextTick()
                formRef.value && formRef.value.validateField('stageSubjectGradeList')

            }
        }, {deep: true})
        // 计算属性
        const computes = {
            placeholder: computed(() => route.query.institutionType == 1 ? '请选择学段学科年级' : '请选择学段学科')
        }

        onMounted(() => {})

        return {
            ...toRefs(state),
            ...methods,
            ...computes,
            ...toRefs(props),
            formRef,
            areaRef,
            route
        }
    }
})
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

 
</style>
